<script setup lang="ts">
import { mergeProps } from "vue";
import { pick } from "lodash-es";

import useTable from "@/hooks/useTable";
import ProTable from "./ProTable.vue";
import { ProForm, TProFormProps } from "../../form";
import type { TProTable } from "./ProTable.vue";

const tableKeys = [
  "title",
  "columns",
  "showHeaderBar",
  "footerFixed",
  "tableProps",
] as const;

const formKeys = [
  "formItems",
  "col",
  "gutter",
  "resetText",
  "confirmText",
  "cancelText",
] as const;

// type TFormKeys = (typeof formKeys)[number];
type TFormKeys =
  | "formItems"
  | "col"
  | "gutter"
  | "resetText"
  | "confirmText"
  | "cancelText";
// type TTableKeys = (typeof tableKeys)[number];
type TTableKeys =
  | "title"
  | "columns"
  | "showHeaderBar"
  | "footerFixed"
  | "tableProps";

type TProTableMaxProps = Pick<TProTable, TTableKeys> &
  Partial<Pick<TProFormProps, TFormKeys>> & {
    service: [string, any?];

    // 表单
    formProps?: any;
  };

const props = withDefaults(defineProps<TProTableMaxProps>(), {
  showHeaderBar: true,
  formProps: {
    footer: true,
  },
});

const {
  list,
  pagination,
  search,
  isFetching,
  refForm,
  submit,
  reset,
  refresh,
} = useTable(...props.service);

const jump = (index: number = 1) => (pagination.page = index);

defineExpose({
  pagination,
  jump,
  reset,
  submit,
  refresh,
});
</script>

<template>
  
  <ElCard class="mb-3" body-style="padding-bottom: 0" v-if="formItems">
    <ProForm
      ref="refForm"
      v-bind="mergeProps(pick(props, formKeys), formProps || {})"
      :formItems="formItems"
      :loading="isFetching"
      :model="search"
      :footer="{ col: 0 }"
      @submit="submit"
      @reset="reset"
    >
      <slot name="form" />
    </ProForm>
  </ElCard>

  <ProTable
    v-bind="(mergeProps($attrs, pick(props, tableKeys)) as any)"
    :list="list"
    :pagination="pagination"
    :loading="isFetching"
    @refresh="refresh"
  >
    <slot />
    <!-- <slot name="table" /> -->

    <template #title>
      <slot name="title" :search="search" />
    </template>

    <template #headerExtra>
      <slot name="headerExtra" />
    </template>

    <template #footer>
      <slot name="tableFooter" />
    </template>
  </ProTable>
</template>
